<template>
  <view v-if="isShow">
    <slot />
  </view>
</template>

<script lang="ts">
  import { defineComponent, inject, computed, watch, provide } from 'vue';
  import { propTypes } from '@/utils/propTypes';

  export default defineComponent({
    props: {
      name: propTypes.string.isRequired,
      value: [Number, String],
      disabled: propTypes.bool.def(false),
      unread: propTypes.number.def(0)
    },
    emits: ['click'],
    setup(_, { emit }) {
      const index = inject<any>('tab_index');
      const addtabs = inject<any>('tab_addtabs');

      const isShow = computed(() => index.value == _.name || index.value == _.value);

      const getItem = computed(() => ({
        name: _.name,
        value: _.value,
        disabled: _.disabled,
        unread: _.unread
      }));

      addtabs(getItem);

      provide('tabIsShow', isShow);

      watch(isShow, (n) => {
        n && emit('click');
      });

      return {
        index,
        isShow,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .scroll-view {
    height: 100%;
  }
</style>
